<template>
    <div class="pt-12">
        <div class="flex justify-center">
            <div class="p-4 bg-gradient-to-tr from-pink-600 to-purple-600 rounded-full border-gray-300 border-2">
                <icon-font name="my-fill-light" class="text-6xl text-white" />
            </div>
        </div>
        <div class="text-center py-4 text-3xl">{{ user.name }}</div>
        <div class="text-center text-lg text-purple-600">
            <span>账号：</span>
            <span>{{ user.account }}</span>
        </div>
        <div class="text-center text-lg text-purple-600">
            <span>性别：</span>
            <span>{{ user.sex }}</span>
        </div>
        <div class="pt-5 flex justify-center">
            <button class="bg-yellow-400 text-white px-3 py-2 rounded-sm font-bold" @click="signOut">退出登录</button>
        </div>
        <return-tool />
    </div>
</template>

<script>
import IconFont from '../components/IconFont.vue'
import ReturnTool from '../components/ReturnTool.vue'
import { mapState, mapMutations } from 'vuex'

export default {
    components: { IconFont, ReturnTool },

    computed: {
        ...mapState(['user']),
    },

    methods: {
        ...mapMutations(['setUser']),
        signOut() {
            window.localStorage.removeItem('account')
            this.setUser(null)
        },
    },
}
</script>

<style></style>
